App.require(["matrix3"], function (matrix3) {
    var Matrix3 = matrix3.Matrix3;
    App.defineWidget("axis", {
        render: function (ctx) {
            ctx.save();
            var style = this.style;
            ctx.globalAlpha = style.opacity;
            ctx.translate(style.x, style.y);
            ctx.linewidth = style.linewidth;
            ctx.strokeStyle = style.stroke;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(style.width, 0);
            ctx.moveTo(0, 0);
            ctx.lineTo(0, -style.height);
            ctx.stroke();
            if (style.isTickX) {
                var tickX = style.tickX;
                ctx.beginPath();
                ctx.strokeStyle = style.tickStroke;
                while (tickX < style.width) {
                    ctx.moveTo(tickX, 0);
                    ctx.lineTo(tickX, -style.tickLen);
                    tickX += style.tickX;
                }
                ctx.stroke();
            }
            if (style.isTickY) {
                var tickY = style.tickY;
                ctx.beginPath();
                ctx.strokeStyle = style.stepStroke;
                while (tickY < style.height) {
                    ctx.moveTo(0, -tickY);
                    ctx.lineTo(style.tickLen, -tickY);
                    tickY += style.tickY;
                }
                ctx.stroke();
            }
            if (style.isStepX) {
                var stepX = style.stepX;
                ctx.beginPath();
                ctx.strokeStyle = style.stepStroke;
                while (stepX < style.width) {
                    ctx.moveTo(stepX, 0);
                    ctx.lineTo(stepX, -style.stepLen);
                    stepX += style.stepX;
                }
                ctx.stroke();
            }
            if (style.isStepY) {
                var stepY = style.stepY;
                ctx.beginPath();
                ctx.strokeStyle = style.stepStroke;
                while (stepY < style.height) {
                    ctx.moveTo(0, -stepY);
                    ctx.lineTo(style.stepLen, -stepY);
                    stepY += style.stepY;
                }
                ctx.stroke();
            }
            ctx.restore();
        },
        isPointIn: function (ctx, x, y) {
            var style = this.style;
            ctx.save();
            ctx.translate(style.x, style.y);
            ctx.beginPath();
            ctx.rect(-10, -10, style.width + 20, 20);
            ctx.rect(-10, 10, 20, style.height + 20);
            var isIn = ctx.isPointInPath(x, y);
            ctx.restore();
            return isIn;
        },
        style: {
            transform: [],
            x: 0,
            y: 0,
            width: 100,
            height: 100,
            stroke: "black",
            direction: "",
            marker: "",
            linewidth: 1,
            direction: "",
            position: "",
            isStepX: true,
            isStepY: true,
            stepStroke: "gray",
            tickStroke: "gray",
            stepX: 25,
            stepY: 25,
            stepFont: "",
            stepLen: 5,
            tickLen: 3,
            stepXArray: [],
            stepYArray: [],
            stepFill: "",
            isTickX: true,
            isTickY: true,
            tickX: 5,
            tickY: 5,
            isGrid: false,
            gridColor: "black",
            tickGridColor: "black",
            gridLinewidth: 1,
            gridLineDash: [],
            tickGridLinewidth: 1,
            tickGridlineDash: []
        },

        get x() {
            return this.style.x;
        },
        set x(val) {
            this.style.x = val;
            this.getScene().nextRender();
        },
        set y(val) {
            this.style.y = val;
            this.getScene().nextRender();
        },
        get y() {
            return this.style.y;
        },
        get width() {
            return this.style.width;
        },
        set width(val) {
            this.style.width = val;
            this.getScene().nextRender();
        },
        get height() {
            return this.style.height;
        },
        set height(val) {
            this.style.height = val;
            this.getScene().nextRender();
        },
        get stroke() {
            return this.style.stroke;
        },
        set stroke(val) {
            this.style.stroke = val;
            this.getScene().nextRender();
        },
        get marker() {
            return this.style.marker;
        },
        set marker(val) {
            this.style.marker = val;
            this.getScene().nextRender();
        },
        get direction() {
            return this.style.direction;
        },
        set direction(val) {
            this.style.direction = val;
            this.getScene().nextRender();
        },
        get position() {
            return this.style.position;
        },
        set position(val) {
            this.style.position = val;
            this.getScene().nextRender();
        },
        get isStepX() {
            return this.style.isStepX;
        },
        set isStepX(val) {
            this.style.isStepX = val;
            this.getScene().nextRender();
        },
        get isStepY() {
            return this.style.isStepY;
        },
        set isStepY(val) {
            this.style.isStepY = val;
            this.getScene().nextRender();
        },
        get stepStroke() {
            return this.style.stepStroke;
        },
        set stepStroke(val) {
            this.style.stepStroke = val;
            this.getScene().nextRender();
        },
        get tickStroke() {
            return this.style.tickStroke;
        },
        set tickStroke(val) {
            this.style.tickStroke = val;
            this.getScene().nextRender();
        },
        get stepX() {
            return this.style.stepX;
        },
        set stepX(val) {
            this.style.stepX = val;
            this.getScene().nextRender();
        },
        get stepY() {
            return this.style.stepY;
        },
        set stepY(val) {
            this.style.stepY = val;
            this.getScene().nextRender();
        },
        get stepFont() {
            return this.style.stepFont;
        },
        set stepFont(val) {
            this.style.stepFont = val;
            this.getScene().nextRender();
        },
        get stepLen() {
            return this.style.stepLen;
        },
        set stepLen(val) {
            this.style.stepLen = val;
            this.getScene().nextRender();
        },
        set tickLen(val) {
            this.style.tickLen = val;
            this.getScene().nextRender();
        },
        get tickLen() {
            return this.style.tickLen;
        },
        get stepXArray() {
            return this.style.stepXArray;
        },
        set stepXArray(val) {
            this.style.stepXArray = val;
            this.getScene().nextRender();
        },
        get stepYArray() {
            return this.style.stepYArray;
        },
        set stepYArray(val) {
            this.style.stepYArray = val;
            this.getScene().nextRender();
        },
        get stepFil() {
            return this.style.stepFil;
        },
        set stepFil(val) {
            this.style.stepFil = val;
            this.getScene().nextRender();
        },
        get isTickX() {
            return this.style.isTickX;
        },
        set isTickX(val) {
            this.style.isTickX = val;
            this.getScene().nextRender();
        },
        get isTickY() {
            return this.style.isTickY;
        },
        set isTickY(val) {
            this.style.isTickY = val;
            this.getScene().nextRender();
        },
        get linewidth() {
            return this.style.linewidth;
        },
        set linewidth(val) {
            this.style.linewidth = val;
            this.getScene().nextRender();
        },
        get tickX() {
            return this.style.tickX;
        },
        set tickX(val) {
            this.style.tickX = val;
            this.getScene().nextRender();
        },
        get tickY() {
            return this.style.tickY;
        },
        set tickY(val) {
            this.style.tickY = val;
            this.getScene().nextRender();
        },
        get isGrid() {
            return this.style.isGrid;
        },
        set isGrid(val) {
            this.style.isGrid = val;
            this.getScene().nextRender();
        },
        get gridColor() {
            return this.style.gridColor;
        },
        set gridColor(val) {
            this.style.gridColor = val;
            this.getScene().nextRender();
        },
        get tickGridColor() {
            return this.style.tickGridColor;
        },
        set tickGridColor(val) {
            this.style.tickGridColor = val;
            this.getScene().nextRender();
        },
        get gridLinewidth() {
            return this.style.gridLinewidth;
        },
        set gridLinewidth(val) {
            this.style.gridLinewidth = val;
            this.getScene().nextRender();
        },
        get gridlineDash() {
            return this.style.gridlineDash;
        },
        set gridlineDash(val) {
            this.style.gridlineDash = val;
            this.getScene().nextRender();
        },
        get tickGridLinewidth() {
            return this.style.tickGridLinewidth;
        },
        set tickGridLinewidth(val) {
            this.style.tickGridLinewidth = val;
            this.getScene().nextRender();
        },
        get tickGridlineDash() {
            return this.style.tickGridlineDash;
        },
        set tickGridlineDash(val) {
            this.style.tickGridlineDash = val;
            this.getScene().nextRender();
        },
    })
})